出处：掘金

原作者：ErpanOmer

背景与引言

LCP（Largest Contentful Paint，最大内容绘制）是 Google Web Vitals 指标之一，旨在衡量页面在用户视角中“感知到的主要内容出现时间”。这一指标代表的是页面最重要视觉元素加载完成所需的时间

然而在真实页面中，多个可见元素可能几乎同时加载完成，哪一个算“最大”呢？这就引出了我们关注的子问题：视口内的“重要程度”是否等同？ 用户在屏幕上不同区域的注意力分布是否应该对 LCP 计算产生影响？

为此，业界逐渐提出并采用一种叫做视口权重分布模型（Viewport Weighted Distribution Model） 的方法，以提升 LCP 评估的准确性

LCP 指标简介

LCP 的核心概念如下：

• 定义：从用户开始加载页面（navigationStart）起，到页面主视口中最大文本块或图像块的绘制时间
• 元素类型限制：仅包括 <img> , <image>（SVG 内），background images（通过 CSS url() 加载），以及包含文本节点的 block-level 元素
• 忽略元素：超出视口、透明、动画中的元素不会被计入
• 目标性能值：
  • 🟢 良好体验：LCP < 2.5 s
  • 🟡 需要优化：2.5 s ≤ LCP ≤ 4.0 s
  • 🔴 差体验：LCP > 4.0 s

视口权重分布模型：动机与意义

在实际应用中，可能同时存在多个内容块符合 LCP 候选条件，例如：

• 页眉大图（Hero image）
• 标题文本（H1）
• 首段正文内容
• 页面中部插图

此时如果仅依据面积选择最大元素，容易偏离用户真实关注点。例如，视觉焦点往往集中在视口中央 1/3 区域，而非页面顶部或底部边缘。传统模型缺乏对用户注意力空间分布的建模，而视口权重模型正是为此设计

举例说明

假设以下两个元素同时加载完成：

• 元素 A：Hero 图，位于屏幕顶部，占视口 60%
• 元素 B：正文首图，位于屏幕中央，占视口 40%

若仅按面积，元素 A 被选为 LCP。然而用户注意力更集中在屏幕中央，元素 B 实际上影响更大

引入视口权重后，LCP 更可能选择 B，因为它处于权重更高的区域

模型原理

模型定义

视口权重分布模型（Viewport Weight Map） 是一种二维分布函数，描述屏幕上不同区域对用户感知速度的重要性。它本质是一个函数：

W(x, y) ∈ [0, 1]

其中 $(x,y)$ 为元素在视口坐标中的位置，$W$ 表示权重密度

权重分布的常见设定（经验模型）

+-----------------------------+
| Top Edge        Weight ≈ 0.3|
|                             |
|        Mid-top             |
|        ↓                   |
|  Center (x=50%, y=50%) → 1 |
|        ↑                   |
|        Mid-bottom          |
|                             |
| Bottom Edge     Weight ≈ 0.2|
+-----------------------------+

• 屏幕中心区域权重最高
• 越靠近边缘权重越低
• 竖直方向变化大于水平方向

常用函数形式：二维高斯函数、双线性衰减函数

W(x, y) = exp(-α·((x - 0.5)² + β·(y - 0.5)²))

其中 α, β 控制 x/y 方向衰减速率，默认 β > α，体现垂直方向注意力集中

计算流程

1. 收集候选元素：浏览器在布局阶段记录所有满足 LCP 条件的元素及其绘制时间
2. 计算元素在视口中的覆盖面积（Area）：根据元素位置、尺寸裁剪视口区域
3. 计算加权面积（Weighted Area）：

WeightedArea = ∬ Area(x, y) · W(x, y) dx dy

4. 选取具有最大加权面积的元素作为最终 LCP 元素
5. 返回其 renderTime 或 loadTime 作为 LCP 值

浏览器实际实现机制

• Chrome 从 v88+ 起开始引入视口权重优化
• Web-Vitals.js 库中模拟了近似权重处理，但非高斯函数而是通过 DOM 位置映射出简单线性系数
• 采样时间限制：LCP 候选采样在 visibilitychange、用户首次交互（如点击、滚动）之后终止

与传统模型的比较

如何优化页面以改善 LCP？

1. 将重要内容置于视口权重高的区域（通常是中心偏上）
2. 减少渲染延迟：通过 font-display: swap、img 使用 fetchpriority="high" 等手段
3. 利用懒加载优化非核心资源
4. 预加载关键图片资源：<link rel="preload" as="image" href="hero.jpg" />
5. 避免动画内容误入 LCP 候选：animated images、transform 不应参与 LCP

限制与展望

现有问题：

• 权重模型是经验性的，用户场景差异大
• 页面响应式布局下元素可能动态移出视口
• 无法覆盖部分动态内容或骨架屏伪装渲染时间

未来可能方向：

• 更个性化的用户注意力权重模型（结合眼动追踪研究）
• WebAssembly 加速加权积分计算
• 浏览器端提供权重热力图辅助开发者理解 LCP 选取逻辑

总结

视口权重分布模型是对 LCP 精度提升的重要尝试，使性能指标更贴近用户真实体验。它用概率模型接近模拟人类视觉关注分布，为前端优化提供更科学的参考

对开发者而言，理解并善用这一模型，可以更有策略地进行资源预加载、排布关键元素，从而在提升 Lighthouse 分数的同时，真正改善用户感知速度